.example-spacer {
  flex: 1 1 auto;
}

.example-card {
  margin-top: 4px;
}

.example-header-image {
  background-size: cover;
}

.title {
  font-weight: bold;
}

.img-article {
  height: 350px;
}

.action-buttons {
  text-align: center;
}
.example-container {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.example-is-mobile .example-toolbar {
  position: fixed;
  /* Make sure the toolbar will stay on top of the content as it scrolls past. */
  z-index: 2;
}

.example-app-name {
  margin-left: 8px;
}

.example-sidenav-container {
  /* When the sidenav is not fixed, stretch the sidenav container to fill the available space. This
     causes `<mat-sidenav-content>` to act as our scrolling element for desktop layouts. */
  flex: 1;
}

.example-is-mobile .example-sidenav-container {
  /* When the sidenav is fixed, don't constrain the height of the sidenav container. This allows the
     `<body>` to be our scrolling element for mobile layouts. */
  flex: 1 0 auto;
}

.source-name {
  padding-left: 5px;
}

.list-item:hover {
  cursor: pointer;
  background-color: #3f51b5;
  color: white;
}
